* {
  box-sizing: border-box;
}

html {
  height: 100%;
  font-family: Inter, "Noto Sans TC";
  background-color: #142048;
}

body.intro {
  min-width: 320px;
  min-height: 100svh;
  width: 100%;
  max-height: calc(100svh + 60px);
  overflow: hidden;
  position: relative;
  font-family: "Autour One", "Noto Sans TC", sans-serif;
  background: #142048;
}

/* Keep the home scene out of Safari's translucent toolbar during the intro. */
body.home.intro {
  background-color: #142048;
  background-image: linear-gradient(180deg, #142048 0%, #004a66 100%);
}

.intro-browser-top-surface,
.intro-browser-bottom-surface {
  display: none;
}

/* WebKit samples inset from each edge and requires more than 10px of height. */
body.home.coming-soon-page.intro .intro-browser-top-surface,
body.home.coming-soon-page.intro .intro-browser-bottom-surface,
body.home.login-page.intro .intro-browser-top-surface,
body.home.login-page.intro .intro-browser-bottom-surface {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  height: 24px;
  z-index: 12;
  pointer-events: none;
}

body.home.coming-soon-page.intro .intro-browser-top-surface,
body.home.login-page.intro .intro-browser-top-surface {
  top: 0;
  background-color: #142048;
}

body.home.coming-soon-page.intro .intro-browser-bottom-surface,
body.home.login-page.intro .intro-browser-bottom-surface {
  bottom: 0;
  background-color: #004a66;
  overflow: hidden;
}

/* Repeat only the last 24px of the full-height wave, using fadeLayer's scale. */
body.home.coming-soon-page.intro .intro-browser-bottom-wave,
body.home.login-page.intro .intro-browser-bottom-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

body.home.intro .mainWrapper_home {
  visibility: hidden;
  pointer-events: none;
}

body.home.intro .mainWrapper_coming_soon_background {
  height: 100svh;
  height: 100dvh;
}

video[poster] {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

body {
  min-width: 320px;
  min-height: 800px;
  width: 100%;
  height: 100%;
  position: relative;
  font-family: "Autour One", "Noto Sans TC", sans-serif;
  /* background: linear-gradient(180deg,rgba(206, 194, 171, 1) 50%, rgba(0, 0, 0, 1) 100%); */

  background: #142048;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #273562;
  z-index: 99999;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Safari can sample content below a fixed overlay for its translucent toolbar. */
html.is-loading,
html.is-loading body {
  background: #273562 !important;
}

html.is-loading body > :not(.loading):not(script):not(style) {
  visibility: hidden !important;
}

.loading .loadingIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
}

.loading .loadingDots {
  display: block;
  width: 160px;
  height: 160px;
}

.loadingStar {
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(0) rotate(0deg);
  fill: #f4efe6;
  animation: loading-star-wave 2.4s ease-in-out infinite;
}

.loadingStar--164 {
  animation-delay: 0s;
}

.loadingStar--165 {
  animation-delay: 0.45s;
}

.loadingStar--166 {
  animation-delay: 0.9s;
}

.cart,
.checkout,
.bookingConfirm,
.santa,
.booking,
.character,
.merchandise,
.sales,
.workshop,
.myBooking,
.reschedule,
.resetPw,
.performance,
.central {
  background-image: url(../images/2025images/paper_bg.jpg);
}

input [type="text"],
input [type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input::-ms-reveal,
input::-ms-clear {
  display: none;
}

@keyframes loading-star-wave {
  0% {
    fill: #f4efe6;
    transform: translateY(0) rotate(0deg);
  }
  15% {
    fill: #efa53a;
    transform: translateY(-20px) rotate(20deg);
  }
  25% {
    fill: #f4efe6;
    transform: translateY(0) rotate(-8deg);
  }
  30% {
    fill: #f4efe6;
    transform: translateY(0) rotate(0deg);
  }
  100% {
    fill: #f4efe6;
    transform: translateY(0) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loadingStar {
    animation: none;
  }
}

header {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #142048;
  position: absolute;
  top: 0px;
  padding: 0 80px;
  box-sizing: border-box;
  background: rgba(20, 32, 72, 0.96);
  backdrop-filter: blur(8.5px);
  z-index: 11;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
}

.sales header,
.cart header,
.booking header,
.checkout header,
.myBooking header,
.bookingConfirm header,
.merchandise header {
}

.header_left {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 24px;
  height: 100%;
  width: 286px;
  flex: 0 0 286px;
  box-sizing: border-box;
  background: transparent;
  padding: 0 24px;
}

.header_logo {
  width: 159px;
  height: 18px;
  background-image: url(../images/2026images/pp.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  cursor: pointer;
}

.header_nav_icon {
  width: 44px;
  height: 44px;
  background-image: url(../images/2026images/icn_nav.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  cursor: pointer;
}

.header_nav_icon:hover {
  background-image: url(../images/2026images/icn_nav_hover.svg);
}

/* .sideNav_backdrop.active {
  display: block;
  width: 9999px;
  height: 100%;

  position: fixed;
  z-index: 11;
  top: 0px;
  left: 0px;
} */

.sideNav_myProfile {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  border-top: 1px solid #f3ecdf;
  padding-top: 8px;
}

.sideNav_close {
  cursor: pointer;
}

.header_change_lang {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 0 24px;
  width: 286px;
  flex: 0 0 286px;
  box-sizing: border-box;
  justify-content: end;
  background: transparent;
}

.cartBtn {
  padding: 10px;
  position: relative;
}

.myProfileBtn {
  padding: 10px;
  position: relative;
}

.header_change_lang a {
  display: block;
  text-decoration: none;
  color: #fcfcfc;
  font-size: 20px;
}

.header_change_lang .langBtn.active {
  color: #29110b;
  display: none;
}

.header_change_lang .langBtn:hover span {
  color: #f1c683;
}
.header_change_lang span {
  color: #fcfcfc;
  font-size: 16px;
  display: block;
  padding: 10px;
  font-family: "Noto Sans TC", sans-serif;
  line-height: 24px;
}

.header_change_lang .myProfileBtn {
  position: relative;
}

.header_change_lang .myProfileBtn span {
  width: 24px;
  height: 24px;
  background-image: url(../images/2026images/icn_myprofile.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: relative;
  z-index: 2;
}

.header_change_lang .myProfileBtn span:hover {
  background-image: url(../images/2026images/icn_myprofile_hover.svg);
}

.header_change_lang .myProfileBtn.active span {
  background-image: url(../images/2026images/icn_myprofile_hover.svg);
}

.header_switch_section {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 80px;
  flex: 1 1 auto;
  justify-content: center;
  background: transparent;
}

.header_switch_section a {
  color: #fcfcfc;
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  text-decoration: none;
  min-width: 0;
  padding: 8px;
  height: 35px;
  box-sizing: border-box;
  border-bottom: 1px solid transparent;
  text-align: center;
  position: relative;
}

.zh-HK .header_switch_section a {
  /* font-weight: 700; */
}

/* #header_switch_section_workshop {
  display: none;
} */

.header_switch_section a:hover {
  color: #f1c683;
}

.mainWrapper_coming_soon_background_video {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
}

.mainWrapper_coming_soon_background_video video {
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0%;
}

.intro-black-fade {
  position: absolute;
  inset: 0;
  z-index: 10;
  background-color: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

.intro-black-fade.is-visible {
  opacity: 1;
}

.santa_quota_text {
  text-align: center;

  /* EN/Body Small - Bold */
  font-family: Inter, "Noto Sans TC";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  /* 15.6px */
}

.header_switch_section a.active,
.header_switch_section a.active:hover {
  color: #f1c683;
  border-bottom-color: #f1c683;
}
.sideNav {
  width: 100%;
  max-width: none;
  position: fixed;

  top: -900px;
  z-index: 20;

  background: #142048;
  border-radius: 0 0 36px 36px;
  gap: 8px;
  left: 0;
  transform: none;
  max-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
}

.sideNav_outside {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background: #00000045;
  z-index: 2;
  display: none;
}

.sideNav_inner {
  width: 100%;
  border-radius: 0 0 36px 36px;
  background: #142048;
  padding: 20px 80px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sideNav a {
  display: block;
  width: fit-content;
  min-height: 60px;
  padding: 20px 16px;
  color: #fcfcfc;

  /* EN/Button */
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 19.2px */

  text-decoration: none;
  position: relative;
}

.sideNav a::after {
  content: "";
  width: 100%;
  height: 1px;
  background: #f1c683;
  display: none;
  position: absolute;
  bottom: 12px;
}

.sideNav .sideNav_changeLang a::after {
  bottom: -8px;
}

.sideNav_changeLang a {
  height: fit-content;
  min-height: 0;
  padding: 0px;
}

.sideNav_myProfile {
  border-top: 1px solid #1f316f;
  padding-top: 8px;
}

.icon_close_white {
  width: 44px;
  height: 44px;
  background-image: url(../images/2026images/icn_close_white.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin-bottom: 40px;
  cursor: pointer;
}

.icon_close_white:hover {
  width: 44px;
  height: 44px;
  background-image: url(../images/2026images/icn_close_hover.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin-bottom: 40px;
  cursor: pointer;
}

/* .icon_close_white:hover {
  background-image: url(../images/icn_close_hover.svg);
} */

.cartBtn span {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url(../images/2026images/icn_cart_white.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.cartBtn span:hover {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url(../images/2026images/icn_cart_hover.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.cartBtn .cartNum:hover {
  display: flex;
  width: 16px;
  height: 16px;
  padding: 2px 5px;
  justify-content: center;
  align-items: center;
  border-radius: 36px;
  border: 1px solid #fcf3e8;
  background: #c0122d;
  position: absolute;
  top: 2px;
  right: -5px;
  font-size: 13px;
  font-size: 9px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  color: #fcf3eb;
  background-image: unset;
}

/* .cartBtn.active::after,
.myProfileBtn.active::after {
  content: "";
  width: 40px;
  height: 44px;
  position: absolute;
  background-image: url(../images/2026images/icn_cart_hover.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
} */

.cartBtn.active span {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url(../images/2026images/icn_cart_hover.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

.sideNav_changeLang {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: left;
  gap: 24px;
  border-top: 1px solid #1f316f;
  padding: 24px 0px 24px;
  display: none;
}

.sideNav_changeLang span {
  color: #fcfcfc;
  margin-top: 40px;
}

.sideNav_changeLang .langBtn.active span,
.sideNav_changeLang .langBtn:hover span {
  color: #f1c683;
}

/* kv */
.mainWrapper {
  width: 100%;
  height: 100%;
  /* position: relative; */
  background-color: #211b53;
  background-image: linear-gradient(
    180deg,
    #211b53 0%,
    #09357e 49.519%,
    #004a66 100%
  );
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  overflow: hidden;
}

.mainWrapper_coming_soon_background,
.mainWrapper_home,
.mainWrapper_kv_forest {
  background-color: #211b53;
  background-image: linear-gradient(
    180deg,
    #211b53 0%,
    #09357e 49.519%,
    #004a66 100%
  );
}

.mainWrapper_kv_forest_bg {
  mix-blend-mode: multiply;
}

#fadeLayer {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

.mainWrapper_coming_soon_background .ticket_logo {
  position: absolute;
  width: clamp(320px, 46.67vh, 378px);
  height: clamp(320px, 46.67vh, 378px);
  top: 18%;
  left: 50%;

  transform: translate(-50%, 2.6455%);
  min-width: 0;
  max-width: none;
  overflow: hidden;
  z-index: 3;
  animation: landingBookMotion 0.8s linear infinite alternate;
  transform-origin: center center;
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-page-book-art {
  position: absolute;
  width: 60.669%;
  height: 74.477%;
  top: 10.46%;
  left: 50%;
  transform: translateX(-50%) scale(1.27);
  transform-origin: center center;
  overflow: hidden;
  pointer-events: none;
}

.landing-page-book-art img {
  position: absolute;
  width: 133.97%;
  height: 108.67%;
  max-width: none;
  left: -18.51%;
  top: -4.18%;
}

@keyframes landingBookMotion {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 3.975%;
  }
}

@media (max-width: 767px) {
  .mainWrapper_coming_soon_background .ticket_logo {
    width: min(378px, calc(100vw - 12px));
    height: min(378px, calc(100vw - 12px));
    top: 17.5%;
  }

  .mainWrapper_coming_soon_background .figma-star-background {
    width: 1440px;
    height: 100%;
    inset: 0 auto auto 0;
  }

  .landing-page-book-art {
    transform: translateX(-50%);
  }

  .landing-page-book-art img {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}

.end .mainWrapper_kv_title {
  opacity: 1;
}

.mainWrapper_kv_title {
  display: block;
  left: 50%;
  transform: translate(-50%, 0);
  top: 90px;
  height: 23%;
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.figma-star-background {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.mainWrapper_coming_soon_background .figma-star-background {
  z-index: 2;
}

.figma-star {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  --star-angle: 0deg;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: figmaStarShine 2.8s ease-in-out infinite;
}

.figma-star:not(.figma-star-rotated-a):not(.figma-star-rotated-b) {
  transform: rotate(var(--star-angle));
  transform-origin: center;
}

.figma-star-large {
  width: 3.84%;
  background-image: url("../images/2026images/star-for-bg-4x.png?v=20261006-1");
}

.figma-star-medium {
  width: 2.55%;
  background-image: url("../images/2026images/star-for-bg-4x.png?v=20261006-1");
}

.figma-star-small {
  width: 1.46%;
  background-image: url("../images/2026images/star-for-bg-4x.png?v=20261006-1");
}

.figma-star-rotated-a {
  width: 0.97%;
  background-image: url("../images/2026images/star-for-bg-4x.png?v=20261006-1");
  transform: translate(-50%, -50%) rotate(10.37deg);
}

.figma-star-rotated-b {
  width: 1.18%;
  background-image: url("../images/2026images/star-for-bg-4x.png?v=20261006-1");
  transform: translate(-50%, -50%) rotate(42.31deg);
}

.figma-star:nth-child(1) {
  left: 26.6%;
  top: 41.48%;
  --star-angle: 26.9deg;
}
.figma-star:nth-child(2) {
  left: 68.4%;
  top: 68.21%;
  --star-angle: -16.04deg;
}
.figma-star:nth-child(3) {
  left: 27.5%;
  top: 67.04%;
  --star-angle: 81.9deg;
}
.figma-star:nth-child(4) {
  left: 9.52%;
  top: 69.39%;
  --star-angle: 112.8deg;
}
.figma-star:nth-child(5) {
  left: 12.21%;
  top: 34.17%;
  --star-angle: 14.1deg;
}
.figma-star:nth-child(6) {
  left: 71.6%;
  top: 46.8%;
  --star-angle: -39.47deg;
}
.figma-star:nth-child(7) {
  left: 91.81%;
  top: 34.57%;
  --star-angle: 22.48deg;
}
.figma-star:nth-child(8) {
  left: 39.12%;
  top: 93.37%;
  --star-angle: -28.7deg;
}
.figma-star:nth-child(9) {
  left: 80.07%;
  top: 78.77%;
  --star-angle: 67.35deg;
}
.figma-star:nth-child(10) {
  left: 15.28%;
  top: 53.46%;
  --star-angle: -7.65deg;
}
.figma-star:nth-child(11) {
  left: 4.99%;
  top: 61.14%;
  --star-angle: 43.2deg;
}
.figma-star:nth-child(12) {
  left: 35.28%;
  top: 15.68%;
  --star-angle: -52.6deg;
}
.figma-star:nth-child(13) {
  left: 81.32%;
  top: 51.48%;
  --star-angle: 35.1deg;
}
.figma-star:nth-child(14) {
  left: 67.45%;
  top: 93.37%;
  --star-angle: -22.4deg;
}
.figma-star:nth-child(15) {
  left: 31.91%;
  top: 37.34%;
  --star-angle: 9.8deg;
}
.figma-star:nth-child(16) {
  left: 18.88%;
  top: 24.18%;
  --star-angle: -34.75deg;
}
.figma-star:nth-child(17) {
  left: 22.08%;
  top: 6.79%;
  --star-angle: 58.35deg;
}
.figma-star:nth-child(18) {
  left: 64.62%;
  top: 28.46%;
  --star-angle: -11.25deg;
}
.figma-star:nth-child(19) {
  left: 84.27%;
  top: 3.93%;
  --star-angle: 74.4deg;
}
.figma-star:nth-child(20) {
  left: 82.18%;
  top: 10.43%;
  --star-angle: -18.2deg;
}
.figma-star:nth-child(21) {
  left: 79.51%;
  top: 4%;
  --star-angle: 31.6deg;
}

.figma-star:nth-child(2n) {
  animation-delay: -1.4s;
}
.figma-star:nth-child(3n) {
  animation-duration: 3.6s;
}

@keyframes figmaStarShine {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .figma-star {
    animation: none;
  }
}

/* .gradient-button:hover {
  background: linear-gradient(90deg, #f7f4ec 0%, #cfb994 70%, #cfb994 100%);
  background-size: 250% 100%;
}

.gradient-button::before {
  content: "";
  position: absolute;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0px;
  padding: 0px;
  mask-composite: exclude;
  z-index: 0;
  width: 100%;
  height: 100%;
} */

.gradient-button.btn_to_start::before {
  content: "";
  position: absolute;
  background-image: url(../images/2025images/button_border_start.png);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0px;
  padding: 0px;
  /* background: linear-gradient(159deg, rgba(152, 133, 93, 1) 0%, rgba(238, 226, 200, 1) 49%, rgba(184, 161, 111, 1) 100%); */
  mask-composite: exclude;
  z-index: 0;
  width: 100%;
  height: 100%;
  left: 0px;
}

.gradient-button.btn_workshop::before {
  content: "";
  position: absolute;
  background-image: url(../images/2025images/button_border_m.png);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0px;
  padding: 0px;
  /* background: linear-gradient(159deg, rgba(152, 133, 93, 1) 0%, rgba(238, 226, 200, 1) 49%, rgba(184, 161, 111, 1) 100%); */
  mask-composite: exclude;
  z-index: 0;
  width: 100%;
  height: 100%;
  left: -1px;
}

.mainWrapper_kv_button {
  position: absolute;
  width: 100%;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.end .mainWrapper_kv_button {
  opacity: 1;
  text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.85);
}

.mainWrapper_kv_monster_button {
  display: flex;
  position: absolute;
  right: 63%;
  left: auto;
  bottom: 67%;
  width: 209px;
  height: 56px;
  /* background-image: url(../images/main_santa_button.png); */
  border-radius: 36px;
  background-color: rgba(238, 226, 200, 0.6);
  border: #98855d;

  background-image: none;
  display: flex;
  flex-direction: row;
  text-decoration: none;
}

.mainWrapper_kv_monster_button_content {
  color: #1f316f;
  text-align: center;

  /* EN/Button */
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 19.2px */
  text-align: center;
  width: 100%;
  text-shadow: none;
}

.mainWrapper_coming_soon_background_desc {
  max-width: 533px;
  margin-top: 50px;
  /* margin-bottom: 30px; */
  position: absolute;
  top: calc(18% + clamp(320px, 46.67vh, 378px) - 38px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

@media (max-width: 767px) {
  .mainWrapper_coming_soon_background_desc {
    top: calc(18% + min(378px, calc(100vw - 12px)) - 67px);
  }
}

.btn_workshop {
  right: auto;
  left: 64%;
  bottom: 68%;
  width: 209px;
  /* height: 64px; */
  border-radius: 36px;
  background-color: rgba(238, 226, 200, 0.6);
  border: 0px solid #98855d;
  background-image: none;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.santa_quota_text,
.workshop_quota_text {
  text-align: center;

  /* EN/Body Small - Bold */
  font-family: Inter, "Noto Sans TC";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  /* 18px */
}

.gradient-button {
  width: 272px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  box-sizing: border-box;
  text-align: center;
  z-index: 10;
  cursor: pointer;
  background: radial-gradient(
    88.54% 88.54% at 50% 21.87%,
    #fef1c0 20%,
    #ffb04f 100%
  ) !important;
  background-size: 140% 140%;
  background-position: 50% 0%;
  transition:
    transform 220ms ease,
    filter 220ms ease;
  border-radius: 100px;
  border: 0px;
}

.gradient-button.btn_workshop {
  width: 280px;
}

.gradient-button.btn_to_start {
  width: 272px;
  position: relative;
  height: 68px;
  overflow: hidden;
  text-decoration: none;
  box-shadow:
    inset 0px -4px 6px rgba(0, 0, 0, 0.25),
    inset 0px 2px 1px rgba(255, 255, 255, 0.25);
}

.btn_to_start .mainWrapper_kv_monster_button_content {
  height: auto;
  width: auto;
  flex: 1 1 auto;
  white-space: nowrap;
  word-break: normal;
  position: relative;
  z-index: 1;
}

.gradient-button.btn_to_start::before,
.gradient-button.btn_to_start::after {
  display: none;
}

.gradient-button.btn_to_start::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.12);
  opacity: 0;
  pointer-events: none;
}

.figma-button-star {
  position: relative;
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background: url(../images/2026images/figma-button-star.svg) center / 100% 100%
    no-repeat;
  pointer-events: none;
  transition:
    transform 220ms ease,
    filter 220ms ease;
}

.gradient-button.btn_to_start:hover {
  background: radial-gradient(
    ellipse at 50% 0%,
    #fef1c0 20%,
    #ffd188 60%,
    #ffb04f 100%
  );
  background-size: 140% 140%;
  background-position: 50% 0%;
  filter: none;
  animation: figmaButtonHoverTranslate 0.958217s linear both;
}

.gradient-button.btn_to_start:hover::after {
  animation: figmaButtonHoverOpacity 0.958217s linear both;
}

.gradient-button.btn_to_start:active {
  animation: none;
  translate: 0 0;
  transform: translateY(0) scale(0.985);
}

@keyframes figmaButtonHoverOpacity {
  0% {
    animation-timing-function: linear(
      0,
      0.0985,
      0.342,
      0.6483,
      0.9442,
      1.1767,
      1.3179,
      1.364,
      1.3302,
      1.2427,
      1.1314,
      1.0233,
      0.9377,
      0.8853,
      0.8675,
      0.8791,
      0.9105,
      0.9509,
      0.9904,
      1.0219,
      1.0414,
      1.0482,
      1.0443,
      1.033,
      1.0183,
      1.0039,
      0.9923,
      0.9851,
      0.9825,
      0.9838,
      0.9878,
      0.9932,
      0.9984,
      1.0027,
      1.0054,
      1.0064,
      1.0059,
      1.0045,
      1.0025,
      1.0006,
      0.9991,
      0.9981,
      0.9977,
      0.9978,
      0.9983,
      0.9991,
      1.0003,
      1.0007,
      1.0008,
      1.0008,
      1.0008
    );
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes figmaButtonHoverTranslate {
  0% {
    animation-timing-function: linear(
      0,
      0.0985,
      0.342,
      0.6483,
      0.9442,
      1.1767,
      1.3179,
      1.364,
      1.3302,
      1.2427,
      1.1314,
      1.0233,
      0.9377,
      0.8853,
      0.8675,
      0.8791,
      0.9105,
      0.9509,
      0.9904,
      1.0219,
      1.0414,
      1.0482,
      1.0443,
      1.033,
      1.0183,
      1.0039,
      0.9923,
      0.9851,
      0.9825,
      0.9838,
      0.9878,
      0.9932,
      0.9984,
      1.0027,
      1.0054,
      1.0064,
      1.0059,
      1.0045,
      1.0025,
      1.0006,
      0.9991,
      0.9981,
      0.9977,
      0.9978,
      0.9983,
      0.9991,
      1.0003,
      1.0007,
      1.0008,
      1.0008,
      1.0008
    );
    translate: 0 0;
  }
  100% {
    translate: 0 -6px;
  }
}

#skipBtn {
  display: block;
  position: relative;
  color: #fcfcfc;
  text-align: center;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  opacity: 1;
  margin-top: 24px;
  padding: 8px 16px;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  width: fit-content;
  transition:
    color 180ms ease,
    transform 180ms ease;
}

#skipBtn::after {
  display: none;
}

#skipBtn:hover {
  color: #c6bdb5;
}

#skipBtn:hover::after {
  display: none;
}

#skipVideoBtn {
  position: fixed;
  z-index: 12;
  right: clamp(16px, 5.56vw, 80px);
  bottom: clamp(16px, 4.95vh, 38px);
  display: block;
  width: 108px;
  height: 32px;
  margin: 0;
  padding: 0;
  color: #c6bdb5;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    visibility 0s linear 180ms;
}

#skipVideoBtn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms ease;
}

#skipVideoBtn .figma-skip-to-home__surface {
  position: absolute;
  top: 4px;
  left: 0;
  display: flex;
  width: 100%;
  height: 28px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid #c6bdb5;
  border-radius: 100px;
  background: rgba(31, 49, 111, 0.2);
  color: #c6bdb5;
}

#skipVideoBtn .figma-skip-to-home__label {
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

#skipVideoBtn .figma-skip-to-home__icon {
  display: block;
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
}

#skipVideoBtn:focus-visible {
  outline: 2px solid #fcfcfc;
  outline-offset: 4px;
}

@media (max-width: 767px) {
  #skipVideoBtn {
    right: auto;
    bottom: clamp(24px, 9.48vh, 80px);
    left: 50%;
    transform: translateX(-50%);
  }
}

.mainWrapper_coming_soon_background .btnWrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 30px;
  flex-direction: column;
  align-items: center;
}

.mainWrapper_kv_wood_button_group {
  position: absolute;
  top: 88%;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: 0;
  /* overflow: hidden; */
  opacity: 0;
  transition: all 0.5s ease-out;
  min-height: 219px;
  display: flex;
  width: fit-content;
  gap: 36px;
  min-height: unset;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 900px;
}

.end .mainWrapper_kv_wood_button_group {
  opacity: 1;
}

.inputContainer input {
  font-size: 16px !important;
}

.loginPopup {
  width: 624px;
  max-height: 80vh;

  position: RELATIVE;
  margin: auto;

  background-repeat: no-repeat;
  background-size: 100% auto;
  padding: 36px 22px 24px 26px;
  flex-direction: column;
  align-items: center;
  /* gap: 16px; */
  border-radius: 36px;
  border: 2px solid #f1c683;
  background: #fbf0df;
  transition: all 0.3s ease-in-out;
}

.loginPopup .popupContent {
  overflow: hidden;
  max-height: calc(80vh - 40px);
}

.loginPopup .popupInner {
  max-height: calc(80vh - 40px);
  overflow: auto;
  margin-top: 30px;
}

.loginPopup .popupContent form {
  height: fit-content;
  max-width: 100%;
  /* overflow-y: scroll; */
  padding-bottom: 40px;
  /* padding-right: 5px; */
  padding-left: 10px;
  padding-right: 14px;
}

.loginPopup ul {
  margin-left: 23px;
}

.loginPopup .popupContent form input {
  outline: none;
}

.loginPopup .popupContent .popupInner::-webkit-scrollbar {
  width: 7px;
}

.loginPopup .popupContent .popupInner::-webkit-scrollbar-button {
  background: transparent;

  border-radius: 4px;
}

.loginPopup .popupContent .popupInner::-webkit-scrollbar-track-piece {
  background: transparent;
}

.loginPopup .popupContent .popupInner::-webkit-scrollbar-thumb {
  border-radius: 4px;

  background-color: rgba(0, 0, 0, 0.4);

  border: 1px solid slategrey;
}

.cartPopup .popupContent .cartPopup_detail_outside::-webkit-scrollbar-track {
  box-shadow: transparent;
}

.cartPopup .popupContent .cartPopup_detail_outside::-webkit-scrollbar {
  width: 7px;
}

.cartPopup .popupContent .cartPopup_detail_outside::-webkit-scrollbar-button {
  background: transparent;

  border-radius: 4px;
}

.cartPopup
  .popupContent
  .cartPopup_detail_outside::-webkit-scrollbar-track-piece {
  background: transparent;
}

.cartPopup .popupContent .cartPopup_detail_outside::-webkit-scrollbar-thumb {
  border-radius: 4px;

  background-color: rgba(0, 0, 0, 0.4);

  border: 1px solid slategrey;
}

.cartPopup .popupContent .cartPopup_detail_outside::-webkit-scrollbar-track {
  box-shadow: transparent;
}

.loginPopup .popupTitle {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0px;
  width: 100%;
  margin-bottom: 16px;
  border-bottom: 1px solid #c6bdb5;
}

.loginPopup .login_type {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  width: 50%;
  text-align: center;
  padding: 8px 0 16px;
  color: #c6bdb5;
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  text-decoration: none;
}

.loginPopup .login_type.active {
  color: #1f316f;
}

.loginPopup .login_type.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 6px;
  background-color: #1f316f;
  border-radius: 8px 8px 0 0;
  pointer-events: none;
}

.loginPopup .login_type#login.active::after {
  left: 50%;
}

.loginPopup .popupInner {
  padding: 0px;
}

.loginPopup .inputContainer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 26px;
}

.loginPopup_member_fields {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: flex-start;
}

.loginPopup_member_fields .inputContainer {
  flex: 1 1 0;
  min-width: 0;
  gap: 4px;
  margin-bottom: 0;
}

.loginPopup_member_fields .error_msg {
  position: static;
  display: block;
  margin-top: 0;
}

.loginPopup_member_fields input,
.loginPopup_member_fields input::placeholder {
  color: var(--Neutrals-Grey-600, #949494);
  font-family: Inter, "Noto Sans TC";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.loginPopup label {
  color: #1f316f;

  /* EN/Body Small - Bold */
  font-family: Inter, "Noto Sans TC";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  /* 15.6px */
}

.loginPopup .inputContainer input {
  display: flex;
  height: 43px;
  padding: 10px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  background: #fcfcfc;
  border: 2px solid #c6bdb5;
  border-radius: 6px;
  -webkit-appearance: none;

  -moz-appearance: none;
  appearance: none;
}

.loginPopup .inputContainer.has-error input {
  border-color: #c6bdb5;
  box-shadow: 0 0 0 1px #e84548;
}

.loginPopup .error_msg {
  color: #e84548;
}

.loginPopup_popupInner_checkbox span {
  color: #1f316f;

  /* EN/Body Small - Regular */
  font-family: Inter, "Noto Sans TC";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 15.6px */
}

.loginPopup_popupInner_checkbox span a {
  color: #1f316f;
}

.loginPopup label br + span {
  color: #1f316f;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

#loginForm .btnWrapper {
  margin-top: 8px;
}

.loginPopup .btnWrapper {
  min-height: 48px;
  padding-top: 4px;
  box-sizing: border-box;
}

.agreementRemark {
  color: #1f316f;

  /* EN/Body Small - Regular */
  font-family: Inter, "Noto Sans TC";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 15.6px */
}

#loginForm label {
  color: #1f316f;

  /* EN/Body Small - Bold */
  font-family: Inter, "Noto Sans TC";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  /* 15.6px */
}

.loginPopup .goldButton:not(.mfp-close) {
  position: relative;
  width: 100%;
  height: 44px;
  overflow: hidden;
}

.loginPopup .goldButton:not(.mfp-close)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.loginPopup .goldButton:not(.mfp-close) > span {
  position: relative;
  z-index: 1;
}

.loginPopup .goldButton:not(.mfp-close).is-bounce-hover,
.loginPopup .goldButton:not(.mfp-close):focus-visible {
  animation: figmaButtonHoverTranslate 0.958217s linear both;
}

.loginPopup .goldButton:not(.mfp-close).is-bounce-hover::after,
.loginPopup .goldButton:not(.mfp-close):focus-visible::after {
  animation: figmaButtonHoverOpacity 0.958217s linear both;
}

.loginPopup .goldButton:not(.mfp-close):active {
  animation: none;
  translate: 0 0;
  transform: translateY(0) scale(0.985);
}

#loginForm button {
  margin: 16px auto 16px;
}

#forgetPW {
  display: block;

  color: #1f316f;
  text-align: center;
  border: 0px;

  /* EN/Body Small - Regular */
  font-family: Inter, "Noto Sans TC";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 15.6px */
}

.bounceButton.is-bounce-hover {
  animation: figmaButtonHoverTranslate 0.958217s linear both;
}

/* .sideNav .sideNav_myProfile, header .myProfileBtn, header .cartBtn{
  display: none;
}

 .logined  .sideNav_myProfile, .logined header .myProfileBtn, .logined .cartBtn{
  display: block
} */

.sideNav_myProfile {
  display: flex;
}

/* .loginPopup .popButton:hover {
  background: var(--Color-Grey-Grey-500, #A8A7A4);
} */

.loginPopup_popupInner_checkbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
}

.loginPopup_popupInner_checkbox input {
  margin: 0px;
  margin-right: 6px;
  display: block;
  width: 12px;
  height: 12px;
  accent-color: #f1c683;
  flex: 0 0 12px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #fcfcfc;
  border: 1px solid #f1c683;
  border-radius: 4px;
  cursor: pointer;
}

.loginPopup_popupInner_checkbox input:checked {
  background-color: #f1c683;
  background-image: url("../images/2026images/checkbox-check.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
}

.loginPopup_checkbox_contain {
  display: flex;
  flex-direction: column;
  gap: 8px;

  justify-content: space-between;
  margin-top: 14px;
  position: relative;
}

.loginPopup .mfp-close {
  width: 44px;
  aspect-ratio: 1 / 1;
  max-height: 44px;
  background-image: url(../images/2026images/icn_close_white.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  position: absolute;
  top: 12px;
  right: 12px;
  /* background: none; */
  background-color: transparent;
}

.loginPopup::before,
.loginEmailPopup::before {
  content: "";
  position: absolute;
  width: 100%;
  background-image: url(../images/2026images/title-login.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  aspect-ratio: 126 / 113;
  min-width: 100px;
  left: 50%;
  top: 16%;
  z-index: 10;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.fullLoginPopup::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 102px;
  background-image: url(../images/2026images/login-raccoon-boat.png);
  background-position: 54% 50%;
  background-repeat: no-repeat;
  background-size: 158.82% 148.89%;
  left: 50%;
  top: -37px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

.fullLoginPopup .mfp-close {
  background-image: url(../images/2026images/icn_close_black.svg);
}

.fullLoginPopup .mfp-close:hover {
  background-image: url(../images/2026images/icn_close_black_hover.svg);
}

#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  top: 0px;
  /* Change the z-index to a negative value to push it behind other content */
  z-index: 1;
  user-select: none;
}

.devisionLineGold {
  width: 100%;
  height: 6px;
  object-fit: cover;
}

.redButton {
  width: 100%;
  height: 40px;
  border-radius: 100px;
  background: #7b1a1e;
  color: #f3ecdf;
  text-align: center;

  /* EN/Button */
  font-family: "Autour One", "Noto Sans TC";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  /* 19.2px */
  cursor: pointer;
  border: 0px;
}

.grayButton {
  width: 100%;
  height: 40px;
  line-height: 120%;
  color: #fcfcfc;
  border: 1px solid #a9936b;
  background: #a8a7a4;
  border-radius: 32px;
  color: #f3ecdf;
  text-align: center;
  /* EN/Button */
  font-family: "Autour One", "Noto Sans TC";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;

  /* 19.2px */
  position: relative;
  cursor: pointer;
  display: flex;
  text-align: center;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.loginPopup #regBtn.grayButton,
.loginPopup #loginAcctBtn.grayButton {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 4px 16px 0;
  border: 0;
  border-radius: 100px;
  background: radial-gradient(ellipse at 50% 20%, #c6bdb5 0%, #99897b 100%);
  box-shadow:
    inset 0 -4px 6px rgba(0, 0, 0, 0.25),
    inset 0 2px 1px rgba(255, 255, 255, 0.25);
  color: #62564c;
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
}

.loginPopup #regBtn.grayButton:hover,
.loginPopup #regBtn.grayButton:focus-visible,
.loginPopup #loginAcctBtn.grayButton:hover,
.loginPopup #loginAcctBtn.grayButton:focus-visible {
  background: radial-gradient(ellipse at 50% 20%, #c6bdb5 0%, #99897b 100%);
  color: #62564c;
}

:root {
  --gold-button-background: radial-gradient(
    ellipse at 50% 20%,
    #fef1c0 20%,
    #ffd188 60%,
    #ffc06b 80%,
    #ffb04f 100%
  );
  --gold-button-shadow:
    inset 0 -4px 6px rgba(0, 0, 0, 0.25),
    inset 0 2px 1px rgba(255, 255, 255, 0.25);
}

.goldButton {
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  line-height: 1.2;
  color: #1f316f;
  border: 0;
  border-radius: 100px;
  background: var(--gold-button-background);
  box-shadow: var(--gold-button-shadow);
  text-align: center;
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  position: relative;
  cursor: pointer;
  display: flex;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.transparentButton {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #6e5d40;
  border: 2px solid #6e5d40;
  background: transparent;
  border-radius: 32px;
  font-family: "Autour One", "Noto Sans TC";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  text-align: center;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-transform: uppercase;
}

.resetContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* min-height: calc(100svh - 100px); */
  padding: 4%;
  z-index: 2;
  height: 100%;
}

#forgetFW_step1 {
  position: relative;
  z-index: 2;
}

#forgetFW_step2 {
  position: relative;
  z-index: 2;
}

.reserPw_bottom_container {
  display: flex;
  aspect-ratio: 1440 / 787;
  width: 100%;
  position: absolute;
  bottom: 0px;
  align-items: flex-end;
  justify-content: space-between;
  overflow: hidden;
}

#resetPw_bottom_left {
  width: 50%;
  max-width: 540px;
  margin-left: 0%;
}

#resetPw_bottom_right {
  width: 30%;
  max-width: 380px;
}

.resetPw .bookingContainer_main_step1_bottom_row {
  margin-top: 16px;
}

.inputContainer {
  position: relative;
}

.inputContainer img {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.mainWrapper_home {
  /* width: 100%; */
  height: 100%;
  display: flex;

  position: relative;
  /* background-image: url(../images/forest_background_pp_updated.png); */
  /* background-repeat: no-repeat;
  background-size: cover;
  background-position: top center; */
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  /* Ensure content doesn't wrap */
  /* cursor: grab; */
  /* Add grab cursor */
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;

  transition: transform 2s ease-out;
}

/* Figma completion state for the page shown after the intro video or skip. */
.home .mainWrapper_home {
  height: 100svh;
  min-height: 100svh;
  background: linear-gradient(180deg, #142048 0%, #1f316f 54%, #0b315d 100%);
}

@media (min-width: 768px) {
  .home .mainWrapper_home {
    /* Forest: 1036/3840 aspect ratio, minimum width 1970px, bottom -27px.
       Leave 32px below the 96px CTA before the forest begins. */
    min-height: max(
      900px,
      calc(max(531.51px, 26.97917vw) + max(226px, 15.694vw) + 101px)
    );
  }
}

.home .mainWrapper_kv_forest {
  width: 100%;
  min-width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #142048 0%, #1f316f 54%, #0b315d 100%);
}

.home .mainWrapper_kv_wave_bg {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.8;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: figmaWaveReveal 900ms ease-out 80ms both;
}

.home .mainWrapper_kv_wave_bg_mobile {
  display: none;
}

.home .mainWrapper_kv_forest_bg {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -27px;
  width: max(100%, 1970px);
  height: auto;
  max-width: none;
  transform: translateX(-50%);
  mix-blend-mode: normal;
  opacity: 0;
  animation: figmaSceneReveal 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms
    forwards;
}

.home .mainWrapper_kv_title {
  display: block;
  z-index: 5;
  top: 110px;
  width: min(240px, 31vw);
  height: auto;
  max-height: 134px;
  object-fit: contain;
  opacity: 0;
  transform: translate(-50%, 16px);
  animation: figmaTitleReveal 700ms cubic-bezier(0.22, 1, 0.36, 1) 240ms
    forwards;
}

.home .figma-star-background {
  z-index: 3;
}

.home .mainWrapper_kv_button {
  top: 0;
  z-index: 6;
  opacity: 1;
  pointer-events: none;
}

.home .figma-home-cta {
  position: absolute;
  top: max(226px, 15.694vw);
  display: flex;
  width: 171px;
  height: 96px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  animation: figmaCtaReveal 650ms cubic-bezier(0.22, 1, 0.36, 1) 430ms both;
}

.home .figma-home-cta-santa {
  left: calc(50% - 336px);
}

.home .figma-home-cta-workshop {
  left: calc(50% + 179px);
  width: max-content;
  min-width: 171px;
  animation-delay: 520ms;
}

.home .figma-home-cta-star {
  display: block;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  animation: figmaCtaStarShine 2.8s ease-in-out infinite;
  transform-origin: center;
}

.home .mainWrapper_kv_monster_button {
  position: relative;
  top: 0;
  right: auto;
  bottom: auto;
  left: auto;
  width: 171px;
  height: 52px;
  min-height: 52px;
  padding: 8px 16px;
  box-sizing: border-box;
  border: 0;
  background: radial-gradient(
    ellipse at 50% 22%,
    #fef1c0 20%,
    #ffd188 60%,
    #ffb04f 100%
  );
  box-shadow:
    inset 0 -4px 6px rgba(0, 0, 0, 0.25),
    inset 0 2px 1px rgba(255, 255, 255, 0.25);
  pointer-events: auto;
}

.home .mainWrapper_kv_monster_button.btn_workshop {
  width: max-content;
  min-width: 171px;
}

.home .figma-home-cta:hover .mainWrapper_kv_monster_button,
.home .figma-home-cta:focus-within .mainWrapper_kv_monster_button {
  animation: figmaButtonHoverTranslate 0.958217s linear both;
}

.home .figma-home-cta:hover .mainWrapper_kv_monster_button::after,
.home .figma-home-cta:focus-within .mainWrapper_kv_monster_button::after {
  animation: figmaButtonHoverOpacity 0.958217s linear both;
}

.home .figma-home-cta .mainWrapper_kv_monster_button:active {
  animation: none;
  translate: 0 0;
  transform: translateY(0) scale(0.985);
}

.home .figma-home-cta .mainWrapper_kv_monster_button_content {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #1f316f;
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.home .figma-cta-quota {
  display: block;
  width: 100px;
  color: #99897b;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.home .figma-home-cta .mainWrapper_kv_monster_button_content::after {
  display: none;
}

.home .figma-home-cta .mainWrapper_kv_monster_button_content {
  text-align: center;
}

.home .figma-home-cta .mainWrapper_kv_monster_button_content .figma-cta-label {
  display: block;
}

.home .figma-home-cta .mainWrapper_kv_monster_button_content .figma-cta-quota {
  margin-top: 0;
}

.home .figma-home-cta .mainWrapper_kv_monster_button::before {
  display: none;
}

.home .figma-home-cta .mainWrapper_kv_monster_button::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.12);
  opacity: 0;
  pointer-events: none;
}

.home .figma-home-cta .mainWrapper_kv_monster_button:focus-visible {
  outline: 2px solid #f6dbb1;
  outline-offset: 3px;
}

.home .figma-home-cta .mainWrapper_kv_monster_button_content::after {
  content: none;
}

.home .figma-home-cta .mainWrapper_kv_monster_button_content {
  text-shadow: none;
}

.home .figma-home-cta .mainWrapper_kv_monster_button_content .figma-cta-quota {
  color: #99897b;
}

.mfp-bg.secure-chance-popup {
  background: rgba(0, 0, 0, 0.6);
  opacity: 1;
  backdrop-filter: blur(6px);
}

.mfp-wrap.secure-chance-popup .mfp-container {
  padding: 16px;
  background: transparent;
  backdrop-filter: none;
}

.mfp-wrap.secure-chance-popup .mfp-content {
  width: min(592px, calc(100vw - 32px));
  max-width: 100%;
}

.home-secure-chance-popup {
  display: flex;
  width: 100%;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 auto;
  padding: 36px 36px 0;
  box-sizing: border-box;
  border: 2px solid #f1c683;
  border-radius: 36px;
  background: #fbf0df;
  overscroll-behavior: contain;
}

.home-secure-chance-popup__deco {
  position: relative;
  width: 173px;
  height: 120px;
  flex: 0 0 120px;
  overflow: hidden;
}

.home-secure-chance-popup__deco img {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 82px;
  height: 180px;
  transform: translateX(-50%);
  object-fit: cover;
}

.home-secure-chance-popup__content {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.home-secure-chance-popup__copy {
  display: flex;
  width: 100%;
  max-width: 470px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #1f316f;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.home-secure-chance-popup__copy p {
  width: 100%;
  margin: 0;
}

.home-secure-chance-popup__priority strong {
  color: #1f316f;
  font-weight: 800;
}

.nowrap-santa {
  white-space: nowrap;
}

.home-secure-chance-popup__confirm {
  display: flex;
  width: min(340px, 100%);
  height: 48px;
  flex: 0 0 48px;
  align-items: flex-start;
  justify-content: center;
  padding: 4px 16px 0;
  border: 0;
  border-radius: 100px;
  background: radial-gradient(
    ellipse at 50% 22%,
    #fef1c0 20%,
    #ffd188 60%,
    #ffc06b 80%,
    #ffb04f 100%
  );
  box-shadow:
    inset 0 -4px 6px rgba(0, 0, 0, 0.25),
    inset 0 2px 1px rgba(255, 255, 255, 0.25);
  color: #1f316f;
  cursor: pointer;
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 44px;
}

.home-secure-chance-popup__confirm:focus-visible {
  outline: 2px solid #1f316f;
  outline-offset: 3px;
}

.home-secure-chance-popup__visual {
  position: relative;
  width: 100%;
  max-width: 448px;
  flex: 0 0 auto;
  overflow: hidden;
  aspect-ratio: 520 / 151;
}

.home-secure-chance-popup__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

@media (max-width: 767px) {
  .mfp-wrap.secure-chance-popup .mfp-container {
    padding: 16px;
  }

  .mfp-wrap.secure-chance-popup .mfp-content {
    width: min(592px, calc(100vw - 32px));
  }

  .home-secure-chance-popup {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 24px 24px 0;
    border-radius: 36px;
  }

  .home-secure-chance-popup__copy {
    width: calc(100% + 4px);
  }

  .home-secure-chance-popup__confirm {
    width: min(310px, calc(100% + 4px));
    height: 44px;
    flex-basis: 44px;
    padding-top: 0;
    line-height: 44px;
  }

  .home-secure-chance-popup__visual {
    width: min(310px, calc(100% + 4px));
    max-width: none;
    aspect-ratio: 310 / 90;
  }
}

@keyframes figmaSceneReveal {
  from {
    opacity: 0;
    transform: translate(-50%, 28px) scale(1.02);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes figmaWaveReveal {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 0.8;
    transform: scale(1);
  }
}

@keyframes figmaTitleReveal {
  from {
    opacity: 0;
    transform: translate(-50%, 16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes figmaCtaReveal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes figmaCtaStarShine {
  0% {
    filter: drop-shadow(0 0 0 rgba(246, 219, 177, 0));
    opacity: 0.58;
    transform: scale(0.82);
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(246, 219, 177, 0.95));
    opacity: 1;
    transform: scale(1.16);
  }
  100% {
    filter: drop-shadow(0 0 3px rgba(246, 219, 177, 0.55));
    opacity: 0.78;
    transform: scale(0.94);
  }
}

@media (max-width: 767px) {
  .header_left {
    min-width: 0;
    padding-inline: 16px;
  }

  .home .header_change_lang {
    padding-right: 16px;
    justify-content: flex-end;
  }

  .home .header_change_lang .langBtn:not(.active) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  /* Fixed height: on shorter phones the 100svh box pulls the forest bg up into the title. */
  .home .mainWrapper_home {
    height: 844px;
    min-height: 844px;
  }

  .home .mainWrapper_kv_wave_bg_desktop {
    display: none;
  }

  .home .mainWrapper_kv_wave_bg_mobile {
    display: block;
    top: 80px;
    right: auto;
    bottom: auto;
    left: calc(50% - 449px);
    width: 898px;
    height: auto;
    max-width: none;
    object-fit: unset;
    object-position: left top;
    opacity: 1;
    mix-blend-mode: normal;
    clip-path: inset(0 0 calc(100% - 260px) 0);
    animation: none;
  }

  .home .mainWrapper_kv_forest_bg {
    width: max(100%, 1970px);
  }

  .home .mainWrapper_kv_title {
    width: min(240px, calc(100vw - 48px));
    height: 134px;
    top: 138px;
    max-height: none;
  }

  .home .mainWrapper_kv_forest::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    height: 216px;
    background: linear-gradient(180deg, rgba(24, 10, 30, 0) 0%, #180a1e 100%);
    pointer-events: none;
  }

  .home .mainWrapper_kv_button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    bottom: 0;
    gap: 20px;
    padding: 0 0 92px 6px;
    box-sizing: border-box;
  }

  .home .figma-home-cta {
    position: relative;
    top: auto;
    left: auto;
    width: min(280px, calc(100vw - 32px));
    height: auto;
    gap: 0;
  }

  .home .figma-home-cta-star {
    display: none;
  }

  .home .figma-home-cta-workshop {
    width: min(280px, calc(100vw - 32px));
    min-width: 0;
  }

  .home .mainWrapper_kv_monster_button,
  .home .mainWrapper_kv_monster_button.btn_workshop {
    width: 100%;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .mainWrapper_kv_forest_bg,
  .home .mainWrapper_kv_title {
    animation: none;
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .home .mainWrapper_kv_wave_bg {
    animation: none;
    opacity: 0.8;
    transform: scale(1);
  }

  .home .mainWrapper_kv_monster_button,
  .home .mainWrapper_kv_monster_button.btn_workshop {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }
}

#loginFormPriotiry {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
}

#loginFormPriotiry label {
  margin: 0;
  color: #1f316f;

  /* EN/Body Small - Bold */
  font-family: Inter, "Noto Sans TC";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  /* 15.6px */
}

#loginFormPriotiry input#login_priority {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  border: 2px solid #c6bdb5;
  border-radius: 36px;
  padding: 0 16px;
  background: #fcfcfc;
  box-shadow: none;
  color: #62564c;
  font-family: Inter, "Noto Sans TC";
  font-size: 12px;
  font-weight: 400;
  line-height: 130%;
  outline-color: #1f316f;
}

#loginFormPriotiry input#login_priority::placeholder {
  color: #62564c;
  opacity: 1;
}

#loginFormPriotiry label + input#login_priority {
  margin-bottom: 8px;
}

#loginFormPriotiry .loginValidationError {
  display: none;
  position: static;
  margin: -4px 0 4px;
  color: #b52207;
  font-family: Inter, "Noto Sans TC";
  font-size: 12px;
  font-weight: 400;
  line-height: 130%;
}

#loginFormPriotiry input#login_priority.inputError {
  border-color: #b52207;
}

#loginFormPriotiry input#login_priority + label {
  margin-top: 0;
}

#loginFormPriotiry .btnWrapper {
  width: 100%;
  max-width: none;
  height: 48px;
  margin: 8px 0 0;
}

/* #loginFormPriotiry #loginEmailBtn {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 4px 0 0;
  border: 0;
  border-radius: 100px;
  background: radial-gradient(
    ellipse 48% 180% at 50% 20%,
    #fef1c0 20%,
    #ffd188 60%,
    #ffc06b 80%,
    #ffb04f 100%
  );
  box-shadow:
    inset 0 -4px 6px rgba(0, 0, 0, 0.25),
    inset 0 2px 1px rgba(255, 255, 255, 0.25);
  color: #1f316f;
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 120%;
} */

#loginFormPriotiry .loginIdReminder {
  margin-top: -6px;
  color: #1f316f;
  font-family: Inter, "Noto Sans TC";
  font-size: 10px;
  font-weight: 400;
  line-height: 130%;
}

/* #loginFormPriotiry #loginEmailBtn:hover {
  background: radial-gradient(
    ellipse 48% 180% at 50% 20%,
    #fef1c0 20%,
    #ffd188 60%,
    #ffc06b 80%,
    #ffb04f 100%
  );
} */

.loginEmailPopup .popupTitle {
  color: #00432f;
  text-align: center;

  /* EN/Headline XL */
  font-family: "Autour One", "Noto Sans TC";
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  /* 38.4px */
  margin-top: 0px;
}

.priority_booking_deco {
  display: block;
  margin: 24px auto;
}

.forget .santa_intro_container_main_title_ticket {
  width: 100%;
  margin: 116px auto 36px;
  position: relative;
  min-width: 300px;
  text-align: center;
}

.forget .bookingContainer_main_step1_bottom_row {
  margin: 16px auto 36px;
}

.forget .resetContainer p {
  width: 100%;

  text-align: center;
  color: #29110b;
  text-align: center;
  font-family: Inter, "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 36px;
}
.loginPopup::before,
.loginEmailPopup::before #forgetFW_step1 p {
  max-width: 480px;
  text-align: center;
  color: #29110b;
  text-align: center;

  /* EN/Body - Regular */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 22.4px */
}

#forgetFW_step1 .bookingContainer_main_step1_bottom_row {
  max-width: 480px;
}

#forgetFW_step1 .btnWrapper {
  max-width: unset;
  margin: 36px auto;
}

.forget .btnWrapper {
  margin: 36px auto;
}

#forgetFW_step2 {
  display: none;
  position: relative;
  z-index: 5;
}

.forgetFw_bottom_deco {
  width: 100%;
  aspect-ratio: 1620/576;
  max-width: 1280px;
  background-image: url(../images/2025images/forget_pw_deco_bottom.png);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0px;
  z-index: 1;
  max-width: 800px;
}

.resetPw .btnWrapper {
  margin-top: 36px;
}

.resetPw .santa_intro_container_main_title_ticket {
  margin: 56px auto 36px;
}

/* Figma 2026 forgot-password page */
.resetPw.forget {
  min-height: 100svh;
  background: #1f316f;
}

.forget .resetContainer {
  min-height: 685px;
  height: calc(100svh - 125px);
  padding: 136px 24px 24px;
  overflow: hidden;
}

.forget #forgetFW_step1,
.forget #forgetFW_step2 {
  width: min(427px, 100%);
}

.forget .santa_intro_container_main_title_ticket,
.resetPw .santa_intro_container_main_title_ticket {
  width: 100%;
  min-width: 0;
  margin: 0 auto 36px;
}

.forget .santa_intro_container_main_title_ticket .deco_iris {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

.forget .santa_intro_container_main_title_ticket h3 {
  margin: 0;
  padding: 16px 32px;
  color: #f1c683;
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.forget .santa_intro_container_main_title_ticket .divisonLine_green {
  display: block;
  width: 100%;
  height: 6px;
  margin: 0;
}

.forget .resetContainer p,
#forgetFW_step2 p {
  margin: 0;
  color: #fcfcfc;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.forget .bookingContainer_main_step1_bottom_row {
  margin: 16px auto 0;
}

#forgetFW_step1 .bookingContainer_main_step1_bottom_row {
  width: 100%;
  max-width: none;
}

.forget .bookingContainer_main_step1_bottom_row > span {
  display: block;
  margin-bottom: 4px;
  color: #fcfcfc;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.forget .bookingContainer_main_step1_bottom_row_input {
  display: block;
  width: 100%;
  height: 43px;
  padding: 10px 12px;
  border: 2px solid #c6bdb5;
  border-radius: 6px;
  background: #fcfcfc;
  color: #1f316f;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  outline-color: #f1c683;
}

.forget .bookingContainer_main_step1_bottom_row_input::placeholder {
  color: #949494;
  opacity: 1;
}

#forgetFW_step1 .btnWrapper,
.forget .btnWrapper,
.resetPw .btnWrapper {
  width: min(340px, 100%);
  margin: 36px auto 0;
}

.forget .btnContainer.goldButton {
  display: flex;
  width: 100%;
  height: 44px;
}

.forget .forgetFw_bottom_deco {
  width: 668px;
  max-width: none;
  height: 450px;
  aspect-ratio: auto;
  right: calc(50% - 812px);
  bottom: 0;
  background: none;
  z-index: 1;
}

.forget .forgetFw_bottom_deco img {
  display: block;
  width: 576px;
  height: 461px;
  max-width: none;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .forget .resetContainer {
    min-height: 100svh;
    height: auto;
    padding-top: 120px;
  }

  .forget .forgetFw_bottom_deco {
    display: none;
  }
}

.discover_more_nav {
  display: none;
}

.cartBtn .cartNum {
  display: flex;
  width: 16px;
  height: 16px;
  padding: 2px 5px;
  justify-content: center;
  align-items: center;
  border-radius: 36px;
  border: 1px solid #fcf3e8;
  background: #c0122d;
  position: absolute;
  top: 2px;
  right: -5px;
  font-size: 13px;
  font-size: 9px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  color: #fcf3eb;
  background-image: unset;
}

.cart .cartBtn .cartNum {
  display: flex;
  width: 16px;
  height: 16px;
  padding: 2px 5px;
  justify-content: center;
  align-items: center;
  border-radius: 36px;
  border: 1px solid #fcf3e8;
  background: #c0122d;
  position: absolute;
  top: 2px;
  right: -5px;
  font-size: 13px;
  font-size: 9px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  color: #fcf3eb;
  background-image: unset;
}

#forgetFW_step2 p {
  text-align: center;
  color: #fcfcfc;
  text-align: center;

  /* EN/Body - Regular */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 22.4px */
}

#forgetFW_step2 img {
  display: block;
  /* margin: 36px auto 0px; */
}

.error_msg,
.resetPw .error_msg {
  position: absolute;
  bottom: -19px;
  color: #b52207;
  left: 0px;

  /* EN/Body Small - Regular */
  font-family: Inter, "Noto Sans TC";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 15.6px */
}

.capyPopup .popupTitle img {
  margin-top: 0px;
}

.capyPopup .popupTitle h4 {
  margin-top: 24px;
  margin-bottom: 0;
}

.capyPopup .popupDesc {
  color: #1f316f;
  text-align: center;

  /* EN/Body Text/Body - Semi Bold */
  font-family: Inter, "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  margin-top: 8px;
}

/* Figma 2026 forgot-password page overrides. */
body.resetPw.forget {
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 100svh;
  background-color: #0b315d;
  background-image: url(../images/2026images/pp-xmas-2026-bottom-bg.png);
  background-position: center bottom -125px;
  background-size: max(100%, 1440px) auto;
  background-repeat: no-repeat;
}

body.resetPw.forget .resetContainer {
  min-height: calc(100svh - 118px);
  height: auto;
  padding: 128px 24px 24px;
}

body.resetPw.forget .forgetFw_bottom_deco {
  width: min(46.4vw, 668px);
  height: auto;
  right: 0;
  bottom: 0;
  aspect-ratio: 576 / 461;
  overflow: hidden;
}

body.resetPw.forget .forgetFw_bottom_deco img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: right bottom;
}

body.resetPw.forget .forgetPasswordMobileLabel {
  display: none;
}

body.resetPw.forget .forgetPasswordReminder {
  display: block;
  margin: 16px auto 0;
  color: #fcfcfc;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

body.resetPw.forget .forgetPasswordReminder a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 767px) {
  body.resetPw.forget .resetContainer {
    min-height: calc(100svh - 100px);
    padding: 112px 24px 48px;
  }
}

.errorAlertPopup .popupDesc {
  margin: 0;
}

.resetPw .errorAlertPopup .popupDesc {
  margin-top: 8px;
}
.paymentAlertPopup .popupDesc {
  margin: 0;
}

.capyPopup {
  max-width: 624px;
}

body:not(.resetPw)
  .newTypePopup:not(.cartPopup):not(.delPopup):not(.delConfirmPopup):not(
    .errorAlertLoginPopup
  ).capyPopup
  .popupTitle
  > img {
  display: block;
  width: 81.923px;
  height: 120px;
  margin: 0 auto;
  object-fit: cover;
  object-position: top center;
}

body:not(.resetPw)
  .newTypePopup:not(.cartPopup):not(.delPopup):not(.delConfirmPopup):not(
    .errorAlertLoginPopup
  ).capyPopup
  .popupTitle
  > div {
  width: 81.923px;
  height: 120px;
  margin: 0 auto;
  overflow: hidden;
}

body:not(.resetPw)
  .newTypePopup:not(.cartPopup):not(.delPopup):not(.delConfirmPopup):not(
    .errorAlertLoginPopup
  ).capyPopup
  .popupTitle
  > div
  > img {
  display: block;
  width: 81.923px;
  height: 120px;
  margin: 0;
  object-fit: cover;
  object-position: top center;
}

.changeLangpopup .btnWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  gap: 16px;
}

.changeLangpopup .popupTitle {
  margin-bottom: 0;
}

.newTypePopup h4 {
  margin-top: 24px;
  color: #b11619;
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  /* 36px */
  text-transform: uppercase;
  margin-bottom: 0;
}

.newTypePopup:not(.cartPopup):not(.addCartPopup) .btnWrapper {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  padding: 4px 0;
  height: auto;
  margin-top: 0;
}

.newTypePopup:not(.cartPopup):not(.addCartPopup) .redButton,
.newTypePopup:not(.cartPopup):not(.addCartPopup) .goldButton {
  width: 100%;
  max-width: 340px;
  height: 44px;
}

.newTypePopup:not(.cartPopup):not(.addCartPopup) .transparentButton {
  width: 340px;
  height: 44px;
  border: 1px solid #62564c;
  color: #62564c;
  font-family: "Playfair Display", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 120%;
}

.errorAlertLoginPopup {
  box-sizing: border-box;
  width: min(520px, calc(100vw - 32px));
  max-width: 520px;
  min-height: 340px;
  padding: 36px;
  border: 2px solid #f1c683;
  border-radius: 36px;
  background: #fbf0df;
  position: relative;
}

.errorAlertLoginPopup .popupInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 0;
}

.errorAlertLoginPopup .popupTitle {
  display: block;
  width: 100%;
  height: 120px;
  margin: 0 0 24px;
}

.errorAlertLoginPopup .popupTitle > div {
  width: 173.077px;
  height: 120px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.errorAlertLoginPopup .popupTitle > div img {
  position: absolute;
  top: 8.08px;
  left: calc(50% + 0.58px);
  width: 81.923px;
  height: 180px;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: translateX(-50%);
}

.errorAlertLoginPopup .popupInner > h4 {
  width: 100%;
  margin: 0 0 8px;
  color: #b11619;
  text-align: center;
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  text-transform: uppercase;
}

.errorAlertLoginPopup .popupDesc {
  width: 100%;
  margin: 0;
  color: #1f316f;
  text-align: center;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
}

.errorAlertLoginPopup .mfp-close,
body:has(.errorAlertLoginPopup) .mfp-content > .mfp-close,
body .mfp-content > .errorAlertLoginPopup + .mfp-close {
  top: 13px;
  right: 14px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: url(../images/2026images/icn_close_black.svg) center / 44px 44px
    no-repeat;
  color: transparent;
  opacity: 1;
}

.errorAlertLoginPopup .mfp-close:hover,
body:has(.errorAlertLoginPopup) .mfp-content > .mfp-close:hover,
body .mfp-content > .errorAlertLoginPopup + .mfp-close:hover {
  background-image: url(../images/2026images/icn_close_black_hover.svg);
}

@media (max-width: 600px) {
  .newTypePopup.capyPopup:not(.cartPopup):not(.delPopup):not(
      .delConfirmPopup
    ):not(.cancelPopup):not(.paymentCancelledPopup):not(.changeLangpopup):not(
      .cancelConfirmPopup
    ) {
    box-sizing: border-box;
    width: calc(100vw - 32px);
    max-width: 358px;
    min-width: 0;
    height: auto;
    min-height: 272px;
    padding: 24px;
  }

  .newTypePopup.capyPopup:not(.cartPopup):not(.delPopup):not(
      .delConfirmPopup
    ):not(.cancelPopup):not(.paymentCancelledPopup):not(.changeLangpopup):not(
      .cancelConfirmPopup
    )
    .popupInner {
    gap: 0;
  }

  .newTypePopup.capyPopup:not(.cartPopup):not(.delPopup):not(
      .delConfirmPopup
    ):not(.cancelPopup):not(.paymentCancelledPopup):not(.changeLangpopup):not(
      .cancelConfirmPopup
    )
    .popupTitle {
    height: 120px;
    min-height: 120px;
    margin: 0 0 24px;
  }

  .newTypePopup.capyPopup:not(.cartPopup):not(.delPopup):not(
      .delConfirmPopup
    ):not(.cancelPopup):not(.paymentCancelledPopup):not(.changeLangpopup):not(
      .cancelConfirmPopup
    )
    .popupInner
    > h4 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
  }

  .newTypePopup.capyPopup:not(.cartPopup):not(.delPopup):not(
      .delConfirmPopup
    ):not(.cancelPopup):not(.paymentCancelledPopup):not(.changeLangpopup):not(
      .cancelConfirmPopup
    )
    .popupDesc {
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
  }
}

.icon_date {
  display: block;
  width: 24px;
  aspect-ratio: 1/1;
  background-image: url(../images/2025images/icn_date.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.icon_location {
  width: 24px;
  aspect-ratio: 1/1;
  background-image: url(../images/2025images/icn_location.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.icon_time_black {
  width: 24px;
  aspect-ratio: 1/1;
  background-image: url(../images/2025images/icn_time.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.icon_date_gold {
  width: 24px;
  aspect-ratio: 1/1;
  background-image: url(../images/2025images/icn_calendar_gold.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.icon_time_gold {
  width: 24px;
  aspect-ratio: 1/1;
  background-image: url(../images/2025images/icn_time_gold.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.icon_location_gold {
  width: 24px;
  aspect-ratio: 1/1;
  background-image: url(../images/2025images/icn_location_gold.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  min-width: 24px;
}

.icon_fee_white {
  width: 24px;
  aspect-ratio: 1/1;
  background-image: url(../images/icn_fee_white.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

footer {
  position: sticky;
  /* bottom: 0px; */
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-inline: 5%;
  padding-block: 24px;
  z-index: 11;
}

.footer_left {
  display: flex;
  flex-direction: column;
  color: #fff;
  font-family: Arial;
  font-size: 9.75px;
  font-style: normal;
  font-weight: 400;
  line-height: 13.5px;
  /* 138.462% */
  gap: 16px;
}

.bottomLinks {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.copyright {
  margin-left: 11px;
}

.bottomLinks a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding-inline: 11px;
  border-right: 1px solid white;
}

.social-media-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

#link_to_facebook {
  display: block;
  width: 22px;
  height: 22px;
  background-image: url(../images/2025images/icn_facebook.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

#link_to_youtube {
  display: block;
  width: 22px;
  height: 22px;
  background-image: url(../images/2025images/icn_youtube.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

#link_to_ins {
  display: block;
  width: 22px;
  height: 22px;
  background-image: url(../images/2025images/icn_ins.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.swire_logo {
  width: 211.596px;
  height: 22.5px;
  background-image: url(../images/2025images/swire.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.sideNav .langBtn.active::after {
  display: block;
  bottom: -8px;
}

.sideNav a:hover {
  color: #fcfcfc;
  /* border-bottom: 1px solid; */
}

.sideNav a.active::after {
  display: block;
}

.sideNav a.active {
  color: #f1c683;
}

.sideNav a.inactive,
.sideNav a[aria-disabled="true"] {
  color: rgba(219, 214, 209, 0.5);
  cursor: default;
}

.sideNav a:not(.inactive):not([aria-disabled="true"]):hover {
  color: #f1c683;
}

.item_numEditor {
  min-width: 122px;
  height: 40px;
}

.sold_out {
  width: 100%;
  display: block;
  text-align: center;
}

.loginPopup .popupInner {
  /* padding: 7px 56px; */
  gap: 0px;
}

@media (max-width: 1140px) {
  .discover_more_nav .icon_view_more p {
    text-align: center;
    color: #f3ecdf;
    text-align: center;

    /* EN/Body Small - Bold */
    /* -webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #29110B; */
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    /* 15.6px */
  }

  .discover_more_nav {
    border-radius: 24px 24px 0 0;
    background: #113121;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    margin-top: -4vh;
    position: relative;
    /* display: none; */
  }

  .discover_more_inner {
    border-radius: 16px 16px 0 0;
    border: 1.3px solid #a9936b;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
    padding-top: 36px;
  }

  .discover_more_nav p {
    color: #f3ecdf;
    text-align: center;

    /* EN/Sub Title */
    font-family: "Autour One", "Noto Sans TC";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
  }

  .discover_more_nav .link_to_merchandise {
    background-image: url(../images/2025images/ticket_button_graffiti_m.png);
  }

  .discover_more_nav .link_to_merchandise span {
    white-space: break-spaces;
  }
  .discover_more_nav .link_to_character {
    background-image: url(../images/2025images/ticket_button_elephant_m.png);
  }

  .discover_more_nav .link_to_redemption {
    background-image: url(../images/2025images/ticket_button_sales_m.png);
  }

  .discover_more_nav .link_to_performance {
    background-image: url(../images/2025images/ticket_button_performance_m.png);
  }
  .discover_more_nav .link_to_central {
    background-image: url(../images/2025images/ticket_button_central_m.png);
  }

  .discover_more_nav_bottom {
    width: 100%;
    aspect-ratio: 409/159;
    background-image: url(../images/2025images/deco_discover_more_bottom.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
  }

  .icon_view_more {
    top: -52px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
  }

  .mainWrapper_kv_wood_button_group {
    display: none;
  }
}

/* Login home: Figma extra buttons; desktop grid above 1140px, mobile list at or below it. */
@media (min-width: 1141px) {
  /* --u scales 1px at 1970px art width up to the artwork's scale on wider screens. */
  body.home.login-page .mainWrapper_kv_wood_button_group {
    --u: max(1px, calc(100vw / 1970));
    top: calc(100% + 27px - max(100vw, 1970px) * 0.09);
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    width: calc(var(--u) * 967);
    max-width: none;
    min-height: 0;
    gap: calc(var(--u) * 16) calc(var(--u) * 24);
    align-items: flex-start;
    align-content: flex-start;
  }
}

@media (max-width: 1140px) {
  body.home.login-page .discover_more_nav {
    background: #142048;
    border-radius: 36px 36px 0 0;
    padding: 8px;
  }

  body.home.login-page .discover_more_inner {
    width: 100%;
    border-color: #e79c28;
    border-radius: 24px 24px 0 0;
    padding-top: 36px;
  }

  body.home.login-page .discover_more_inner > p {
    font-family: "Playfair Display", "Noto Sans TC", serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #f1c683;
    text-transform: uppercase;
  }

  body.home.login-page .discover_more_nav_bottom {
    width: 100%;
    aspect-ratio: 374 / 140;
    margin-top: -32px;
    background-image: url(../images/2026images/figma-discover-bookshelf-mobile.png);
    background-size: 100% 100%;
  }
}

body.home.login-page .home-extra-btn {
  position: relative;
  display: block;
  flex: 0 0 auto;
  background: none;
  color: #1f316f;
  text-decoration: none;
}

body.home.login-page .home-extra-btn:focus-visible {
  outline: 2px solid #f6dbb1;
  outline-offset: 3px;
}

body.home.login-page .home-extra-btn img {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
}

body.home.login-page .home-extra-btn__label {
  position: absolute;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: break-word;
  color: #1f316f;
}

body.home.login-page .home-extra-btn--desktop {
  width: calc(var(--u, 1px) * 238);
  height: calc(var(--u, 1px) * 62);
}

body.home.login-page .home-extra-btn--desktop .home-extra-btn__frame {
  left: 0;
  top: calc(var(--u, 1px) * 4);
  width: calc(var(--u, 1px) * 238);
  height: calc(var(--u, 1px) * 58);
}

body.home.login-page .home-extra-btn--desktop .home-extra-btn__visual {
  left: calc(var(--u, 1px) * 4);
  top: calc(var(--u, 1px) * 7);
  width: calc(var(--u, 1px) * 86);
  height: calc(var(--u, 1px) * 52);
}

body.home.login-page .home-extra-btn--desktop .home-extra-btn__vector {
  left: calc(var(--u, 1px) * 3.4);
  top: calc(var(--u, 1px) * 7.31);
  width: calc(var(--u, 1px) * 231.2);
  height: calc(var(--u, 1px) * 51.38);
}

body.home.login-page .home-extra-btn--desktop .home-extra-btn__label {
  left: calc(var(--u, 1px) * 90);
  top: calc(var(--u, 1px) * 8);
  width: calc(var(--u, 1px) * 144);
  height: calc(var(--u, 1px) * 50);
  padding: calc(var(--u, 1px) * 4) calc(var(--u, 1px) * 8);
  font-size: calc(var(--u, 1px) * 16);
}

body.home.login-page .home-extra-btn--mobile {
  width: 280px;
  height: 70px;
}

body.home.login-page .home-extra-btn--mobile .home-extra-btn__frame {
  left: 0;
  top: 0;
  width: 280px;
  height: 70px;
}

body.home.login-page .home-extra-btn--mobile .home-extra-btn__visual {
  left: 4px;
  top: 4px;
  width: 106.16px;
  height: 62px;
}

body.home.login-page .home-extra-btn--mobile .home-extra-btn__vector {
  left: 4px;
  top: 4px;
  width: 272px;
  height: 62px;
}

body.home.login-page .home-extra-btn--mobile .home-extra-btn__label {
  left: 110px;
  top: 6px;
  width: 166px;
  height: 58px;
  padding: 10px 8px;
}

@media (max-width: 960px) {
  .gradient-button.gradient-button.btn_workshop::before {
    content: "";
    position: absolute;
    background-image: url(../images/2025images/button_border_m.png);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0px;
    padding: 0px;
    /* background: linear-gradient(159deg, rgba(152, 133, 93, 1) 0%, rgba(238, 226, 200, 1) 49%, rgba(184, 161, 111, 1) 100%); */

    z-index: 0;
    width: 280px;
    height: 52px;
    left: unset;
  }

  .regPwConfirmContainer .error_msg {
    bottom: -29px;
  }

  .resetPw .santa_intro_container_main_title_ticket {
    margin-top: 0px;
    margin-bottom: 24px;
  }

  .mainWrapper_kv_title {
    height: 20%;
    top: 10%;
  }

  .gradient-button {
    width: 280px;
  }

  .gradient-button::before {
    content: "";
    position: absolute;
    background-image: url(../images/2025images/button_border_m.png);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0px;
    padding: 0px;
    /* background: linear-gradient(159deg, rgba(152, 133, 93, 1) 0%, rgba(238, 226, 200, 1) 49%, rgba(184, 161, 111, 1) 100%); */
    mask-composite: exclude;
    z-index: 0;
    width: 280px;
    height: 52px;
  }

  .header_change_lang .langBtn {
    display: none;
  }

  .header_change_lang .langBtn:hover::after {
    bottom: -8px;
  }

  .header_change_lang {
    width: 92px;
    flex: 0 0 92px;
    padding: 0px;
    justify-content: center;
  }

  header {
    padding: 0px;
  }

  footer {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-block: 24px;
  }

  .bottomLinks {
    flex-wrap: wrap;
    justify-content: center;
  }

  .social-media-container {
    justify-content: center;
  }

  .mainWrapper_kv_button {
    position: absolute;
    width: 100%;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 85px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    transition: all 0.5s ease-out;
  }

  .mainWrapper_kv_monster_button {
    display: flex;
    position: static;

    bottom: none;
    /* width: 224px; */

    /* background-image: url(../images/main_santa_button.png); */
    background-size: 100% auto;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-bottom: 20px;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.85);
  }

  .resetContainer .divisonLine_green {
    width: 100%;
  }
  .resetContainer {
    /* min-height: 660px !important;
  height: calc(100svh - 80px) !important; */
  }
  .resetContainer {
    padding-bottom: 0px;
    min-height: 100svh;
    padding-top: 120px;
  }

  .resetContainer.reset {
    padding-bottom: 0px;
    min-height: 100svh;
    padding-top: 60px;
  }

  .reserPw_bottom_container {
    position: absolute;
    margin-top: 33px;
  }

  #resetPw_bottom_left {
    min-width: 232px;
    margin-left: 0px;
    margin-right: -22%;
    position: relative;
  }

  #resetPw_bottom_right {
    width: 30%;
    max-width: 380px;
    min-width: 250px;
    transform: translateX(13%);
    /* margin-right: -9%; */
  }

  /* .errorAlertPopup .popupTitle h4{
    margin-bottom: 24px;
  } */
  .header_change_lang .myProfileBtn {
    display: none;
  }

  .header_left {
    flex: auto;
  }

  .header_switch_section {
    display: none;
  }

  .loginPopup {
    width: 100%;
    padding: 24px;
    max-width: 358px;
    padding-right: 24px;
    padding-left: 24px;
  }

  .loginPopup .popupContent form {
    height: fit-content;
    max-width: 100%;
    /* overflow-y: scroll; */
    padding-bottom: 40px;
    /* padding-right: 5px; */
    padding-left: 0px;
    padding-right: 4px;
  }

  .loginPopup .popupTitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
    width: 100%;
    margin-bottom: 16px;
    padding-left: 0px;
    padding-right: 4px;
    border-bottom: 1px solid #c6bdb5;
  }
  .loginPopup:not(.fullLoginPopup)::before,
  .loginEmailPopup::before {
    content: "";
    position: absolute;
    width: 100%;
    background-image: url(../images/2026images/title-login.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    aspect-ratio: 126 / 113;
    min-width: 100px;
    left: 50%;
    top: 16%;
    z-index: 10;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .loginPopup .login_type {
    width: 50%;
  }

  .loginEmailPopup,
  .loginEmailPopup.newTypePopup {
    padding: 68px 36px 24px 36px;
  }

  /* .sideNav_myProfile {
    border-top: 0px;
  } */

  .sideNav_changeLang {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: left;
    gap: 24px;
    border-top: 1px solid #1f316f;
    padding: 24px 0px 24px;
  }

  .sideNav_inner {
    padding-inline: 16px;
  }

  #forgetFW_step2 img {
    display: block;
    margin: 24px auto 0px;
    /* width: 200px; */
  }

  #forgetFW_step2 .divisonLine_green {
    margin-top: 16px;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .mfp-wrap:has(.loginPopup) .mfp-container {
    padding: 0;
  }

  .mfp-wrap:has(.loginPopup) .mfp-content {
    width: 100%;
  }

  .loginPopup {
    height: auto;
    max-height: 80vh;
    max-height: 80dvh;
    padding: 68px 24px 24px;
  }

  .loginPopup .popupContent {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: calc(80vh - 96px);
    max-height: calc(80dvh - 96px);
    min-height: 0;
  }

  .loginPopup .popupInner {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-top: 0;
  }

  .loginPopup form > .inputContainer {
    gap: 4px;
    margin-bottom: 12px;
    margin-left: 2px;
    margin-right: 6px;
  }

  .loginPopup .error_msg {
    position: static;
    bottom: auto;
    left: auto;
    width: 100%;
    word-break: break-word;
  }

  .loginPopup form > .inputContainer .showPw {
    top: 21.5px;
    right: 16px;
  }

  .loginPopup_checkbox_contain > .error_msg {
    margin-top: -8px;
  }

  .loginPopup .popupTitle {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fbf0df;
  }

  .loginPopup form .btnWrapper {
    position: sticky;
    bottom: 0;
    z-index: 1;
    min-height: 60px;
    padding-top: 16px;
    background: #fbf0df;
  }

  .loginPopup #regBtn.grayButton,
  .loginPopup #regBtn.goldButton,
  .loginPopup #loginAcctBtn.grayButton,
  .loginPopup #loginAcctBtn.goldButton {
    height: 44px;
    min-height: 44px;
  }

  .loginPopup .mfp-close {
    top: 14px;
    right: 14px;
  }
}

@media (max-width: 640px) {
  .resetPw {
    min-height: unset;
  }
}

/* Figma 2026 forgot-password page: loaded after legacy Santa page styles. */
body.resetPw.forget {
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 100svh;
  background: linear-gradient(180deg, #211b53 0%, #09357e 49.52%, #004a66 100%);
}

body.resetPw.forget .resetContainer.santa_container {
  flex: 1 0 auto;
  min-height: calc(100svh - 100px);
  height: calc(100svh - 100px);
  padding: 128px 24px 24px;
  background-color: transparent;
  background-image: url(../images/2026images/pp-xmas-2026-bottom-bg.png);
  background-position: center bottom -125px;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

body.resetPw.forget footer {
  flex: 0 0 auto;
  margin-top: auto;
}

body.resetPw.forget .forgetFw_bottom_deco {
  width: 668px;
  height: 450px;
  right: 0;
  bottom: -125px;
  aspect-ratio: auto;
  overflow: hidden;
}

body.resetPw.forget .forgetFw_bottom_deco img {
  width: 576px;
  height: 461px;
  margin: 0 0 0 auto;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
}

@media (max-width: 767px) {
  body.resetPw.forget .resetContainer.santa_container {
    min-height: calc(100svh - 100px);
    padding: 112px 24px 48px;
  }
}

@media (max-width: 767px) {
  body.resetPw.forget .resetContainer.santa_container {
    min-height: calc(100svh - 190px);
    height: auto;
    padding: 116px 16px 0;
    overflow: hidden;
    background-position: center bottom;
  }

  body.resetPw.forget .santa_intro_container_main_title_ticket {
    margin-bottom: 36px;
  }

  body.resetPw.forget .santa_intro_container_main_title_ticket h3 {
    line-height: 1.3;
  }

  body.resetPw.forget #forgetFW_step1 .btnWrapper {
    width: 100%;
  }

  body.resetPw.forget .btnContainer.goldButton {
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
  }

  body.resetPw.forget .forgetPasswordDesktopLabel {
    display: none;
  }

  body.resetPw.forget .forgetPasswordMobileLabel {
    display: inline;
  }

  body.resetPw.forget .forgetPasswordReminder {
    font-size: 12px;
    white-space: nowrap;
  }

  body.resetPw.forget .forgetFw_bottom_deco {
    display: block;
    top: 537px;
    right: auto;
    bottom: auto;
    left: 25%;
    width: 85.64%;
    height: auto;
    aspect-ratio: 334 / 225;
    overflow: hidden;
  }

  body.resetPw.forget .forgetFw_bottom_deco img {
    width: 86.23%;
    height: 102.44%;
    margin: 0;
    object-fit: contain;
    object-position: left top;
  }

  body.resetPw.forget footer {
    min-height: 190px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 24px 10px;
    box-sizing: border-box;
  }

  body.resetPw.forget .footer_left {
    width: 100%;
    align-items: center;
    gap: 24px;
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.3;
  }

  body.resetPw.forget .social-media-container {
    gap: 24px;
  }

  body.resetPw.forget .social-media-container a {
    width: 32px;
    height: 32px;
    background-position: center;
    background-size: 100% auto;
  }

  body.resetPw.forget #link_to_facebook,
  body.resetPw.forget #link_to_ins,
  body.resetPw.forget #link_to_youtube {
    width: 32px;
    height: 32px;
  }

  body.resetPw.forget .bottomLinks {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1.3;
  }

  body.resetPw.forget .bottomLinks a {
    padding-inline: 6px;
  }

  body.resetPw.forget .bottomLinks .copyright {
    margin-left: 0;
  }

  body.resetPw.forget .swire_logo {
    width: 273px;
    height: 29px;
  }
}

/* Figma 2026 reset-password page. */
body.resetPw:not(.forget) {
  min-height: 100svh;
  background: linear-gradient(180deg, #211b53 0%, #09357e 49.52%, #004a66 100%);
}

body.resetPw:not(.forget) .resetContainer.reset {
  min-height: 100svh;
  height: 100svh;
  padding: 96px 24px 24px;
  background-image: url(../images/2026images/pp-xmas-2026-bottom-bg.png);
  background-position: center bottom -125px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  overflow: hidden;
}

body.resetPw:not(.forget) #forgetFW_step1,
body.resetPw:not(.forget) #forgetFW_step2 {
  width: min(427px, 100%);
}

body.resetPw:not(.forget) .santa_intro_container_main_title_ticket {
  width: 100%;
  min-width: 0;
  margin: 0 auto 36px;
}

body.resetPw:not(.forget) .santa_intro_container_main_title_ticket .deco_iris {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

body.resetPw:not(.forget) .santa_intro_container_main_title_ticket h3 {
  margin: 0;
  padding: 16px 32px;
  color: #f1c683;
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

body.resetPw:not(.forget)
  .santa_intro_container_main_title_ticket
  .divisonLine_green {
  display: block;
  width: 100%;
  height: 6px;
  margin: 0;
}

body.resetPw:not(.forget) #forgetFW_step1 > p,
body.resetPw:not(.forget) #forgetFW_step2 > p {
  margin: 0;
  color: #fcfcfc;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

body.resetPw:not(.forget) #forgetFW_step2 .resetPw_success_book {
  display: block;
  width: 230px;
  height: 165px;
  margin: 24px auto 0;
  object-fit: contain;
}

body.resetPw:not(.forget) #forgetFW_step2 .btnWrapper {
  margin-top: 24px;
}

body.resetPw:not(.forget) .bookingContainer_main_step1_bottom_row {
  width: 100%;
  max-width: none;
  margin: 16px auto 0;
}

body.resetPw:not(.forget) .bookingContainer_main_step1_bottom_row > span {
  display: block;
  margin-bottom: 4px;
  color: #fcfcfc;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 12px;
  line-height: 1.3;
}

body.resetPw:not(.forget)
  .bookingContainer_main_step1_bottom_row
  > span:first-child {
  font-weight: 700;
}

body.resetPw:not(.forget)
  .bookingContainer_main_step1_bottom_row
  > span:nth-child(2) {
  font-weight: 400;
}

body.resetPw:not(.forget) .bookingContainer_main_step1_bottom_row_input {
  display: block;
  width: 100%;
  height: 43px;
  padding: 10px 44px 10px 12px;
  border: 2px solid #c6bdb5;
  border-radius: 6px;
  background: #fcfcfc;
  color: #1f316f;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 12px !important;
  font-weight: 400;
  line-height: 1.3;
  outline-color: #f1c683;
}

body.resetPw:not(.forget) .inputContainer .showPw {
  width: 24px;
  height: 24px;
  right: 14px;
}

body.resetPw:not(.forget) .btnWrapper {
  width: min(340px, 100%);
  margin: 24px auto 0;
}

body.resetPw:not(.forget) .btnContainer.goldButton {
  display: flex;
  width: 100%;
  height: 44px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

body.resetPw:not(.forget) .reserPw_bottom_container {
  width: 668px;
  height: 450px;
  right: 0;
  bottom: -125px;
  display: block;
  aspect-ratio: auto;
  overflow: hidden;
}

body.resetPw:not(.forget) #resetPw_bottom_left {
  display: block;
  width: 576px;
  height: 461px;
  max-width: none;
  margin: 0 0 0 auto;
  object-fit: contain;
  object-position: right bottom;
}

body.resetPw:not(.forget) #resetPw_bottom_right {
  display: none;
}

@media (max-width: 767px) {
  body.resetPw:not(.forget) {
    display: flex;
    flex-direction: column;
    height: 100svh;
    min-height: max(100svh, 946px);
  }

  body.resetPw:not(.forget) > footer {
    display: none;
  }

  body.resetPw:not(.forget) .resetContainer.reset {
    box-sizing: border-box;
    flex: 1 0 850px;
    min-height: 850px;
    height: auto;
    padding: 116px 16px 0;
    background-position: center bottom;
  }

  body.resetPw:not(.forget) .btnWrapper {
    width: 100%;
  }

  body.resetPw:not(.forget) .reserPw_bottom_container {
    display: block;
    top: auto;
    right: auto;
    bottom: -29px;
    left: 25%;
    width: 85.64%;
    max-width: 334px;
    height: auto;
    aspect-ratio: 334 / 225;
    overflow: hidden;
  }

  body.resetPw:not(.forget) #resetPw_bottom_left {
    width: 86.23%;
    height: 102.44%;
    margin: 0;
    object-fit: contain;
    object-position: left top;
  }

  body.resetPw:not(.forget) #resetPw_bottom_right {
    display: none;
  }

  body.resetPw:not(.forget) > footer {
    position: relative;
    display: flex;
    flex: 0 0 190px;
    height: 190px;
    min-height: 190px;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 24px 10px;
  }

  body.resetPw:not(.forget) .footer_left {
    width: 100%;
    align-items: center;
    gap: 24px;
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.3;
  }

  body.resetPw:not(.forget) .social-media-container {
    gap: 24px;
  }

  body.resetPw:not(.forget) .social-media-container a,
  body.resetPw:not(.forget) #link_to_facebook,
  body.resetPw:not(.forget) #link_to_ins,
  body.resetPw:not(.forget) #link_to_youtube {
    width: 32px;
    height: 32px;
    background-position: center;
    background-size: 100% auto;
  }

  body.resetPw:not(.forget) .bottomLinks {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1.3;
  }

  body.resetPw:not(.forget) .bottomLinks a {
    padding-inline: 6px;
  }

  body.resetPw:not(.forget) .bottomLinks .copyright {
    margin-left: 0;
  }

  body.resetPw:not(.forget) .swire_logo {
    width: 273px;
    height: 29px;
  }
}

/* Figma 2026 reset-password expired-link popup. */
.resetPw .errorAlertPopup.capyPopup {
  box-sizing: border-box;
  width: min(520px, calc(100vw - 32px));
  max-width: 520px;
  padding: 36px;
  border: 2px solid #f1c683;
  border-radius: 36px;
  background: #fbf0df;
}

.resetPw .errorAlertPopup .popupContent,
.resetPw .errorAlertPopup .popupInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.resetPw .errorAlertPopup .popupTitle {
  width: 173.077px;
  height: 120px;
  margin: 0 0 24px;
  overflow: hidden;
  position: relative;
}

.resetPw .errorAlertPopup .popupTitle img {
  position: absolute;
  top: 8.08px;
  left: 50%;
  width: 81.923px;
  height: 180px;
  max-width: none;
  margin: 0;
  object-fit: cover;
  transform: translateX(-50%);
}

.resetPw .errorAlertPopup h4 {
  width: 100%;
  margin: 0 0 8px;
  color: #b11619;
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

/* Figma 2026 login email popup. Keep this surface isolated from other popups. */
.loginEmailPopup,
.loginEmailPopup.newTypePopup {
  box-sizing: border-box;
  position: relative;
  width: 504px;
  min-width: 250px;
  max-width: 504px;
  height: 426px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.loginEmailPopup::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 146px;
  min-width: 0;
  aspect-ratio: auto;
  background: url("../images/2026images/title-login.png") center / 100% 100%
    no-repeat;
  transform: none;
  pointer-events: none;
  z-index: 2;
}

.loginEmailPopup > .popupContent {
  box-sizing: border-box;
  position: absolute;
  top: 109px;
  left: 46px;
  width: 412px;
  height: 308px;
  max-height: none;
  margin: 0;
  padding: 36px;
  border: 2px solid #f1c683;
  border-radius: 0 0 36px 36px;
  background: #fbf0df;
  overflow: visible;
  z-index: 1;
}

.loginEmailPopup > .popupContent > .popupInner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.loginEmailPopup .popupTitle {
  width: 100%;
  margin: 0 0 16px;
  color: #1f316f;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}

.loginEmailPopup .priority_booking_deco {
  display: none;
}

.loginEmailPopup #loginFormPriotiry {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
}

.loginEmailPopup #loginFormPriotiry label {
  margin: 0;
  color: #1f316f;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.loginEmailPopup #loginFormPriotiry input#login_priority {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0 0 8px;
  padding: 0 16px;
  border: 2px solid #c6bdb5;
  border-radius: 36px;
  background: #fcfcfc;
  box-shadow: none;
  color: #62564c;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  outline-color: #1f316f;
}

.loginEmailPopup #loginFormPriotiry input#login_priority::placeholder {
  color: #62564c;
  opacity: 1;
}

.loginEmailPopup #loginFormPriotiry .loginValidationError {
  display: none;
  position: static;
  margin: -4px 0 4px;
  color: #b52207;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

.loginEmailPopup #loginFormPriotiry input#login_priority.inputError {
  border-color: #b52207;
}

.loginEmailPopup #loginFormPriotiry .loginIdReminder {
  margin: -4px 0 0;
  color: #1f316f;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
}

.loginEmailPopup #loginFormPriotiry .btnWrapper {
  width: 100%;
  max-width: none;
  height: 48px;
  margin: 0;
}

/* .loginEmailPopup #loginFormPriotiry #loginEmailBtn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin: 4px 0 0;
  padding: 8px 16px;
  text-align: center;
} */

/* .loginEmailPopup #loginFormPriotiry #loginEmailBtn p {
  margin: 0;
} */

.loginEmailPopup + .mfp-close,
.loginEmailPopup .mfp-close {
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent url("../images/2026images/icn_close_white.svg")
    center / 100% 100% no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0;
  opacity: 1 !important;
  transform: none !important;
}

.loginEmailPopup + .mfp-close:hover,
.loginEmailPopup + .mfp-close:focus-visible,
.loginEmailPopup .mfp-close:hover,
.loginEmailPopup .mfp-close:focus-visible {
  background-image: url("../images/2026images/icn_close_hover.svg") !important;
  opacity: 1 !important;
}

@media (max-width: 960px) {
  .loginEmailPopup,
  .loginEmailPopup.newTypePopup {
    width: 100vw;
    max-width: 390px;
    height: 396px;
    min-height: 0;
    padding: 0;
    top: -45px;
    left: auto;
    transform: none;
  }

  .loginEmailPopup::before {
    top: 30px;
    height: 112px;
  }

  .loginEmailPopup > .popupContent {
    top: 116px;
    left: 50%;
    width: min(328px, calc(100% - 32px));
    height: 280px;
    min-height: 0;
    padding: 22px;
    transform: translateX(-50%);
  }

  .loginEmailPopup > .popupContent > .popupInner {
    padding: 0;
  }

  .loginEmailPopup #loginFormPriotiry .loginIdReminder {
    font-size: 12px;
  }

  .loginEmailPopup #loginFormPriotiry .btnWrapper {
    height: 44px;
    padding: 0;
  }

  .loginEmailPopup #loginFormPriotiry #loginEmailBtn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 8px 16px;
  }

  .loginEmailPopup + .mfp-close,
  .loginEmailPopup .mfp-close {
    top: 16px !important;
    right: 16px !important;
  }
}

.resetPw .errorAlertPopup .popupDesc {
  width: 100%;
  margin: 0;
  color: #1f316f;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.resetPw .errorAlertPopup .btnWrapper {
  width: 340px;
  max-width: 100%;
  margin: 24px auto 0;
}

.resetPw .errorAlertPopup .btnContainer.transparentButton {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 100px;
  background: radial-gradient(
    ellipse 48% 180% at 50% 20%,
    #fef1c0 20%,
    #ffd188 60%,
    #ffc06b 80%,
    #ffb04f 100%
  );
  box-shadow:
    inset 0 -4px 6px rgba(0, 0, 0, 0.25),
    inset 0 2px 1px rgba(255, 255, 255, 0.25);
  color: #1f316f;
  font-family: "Playfair Display", "Noto Sans TC", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 600px) {
  .loginPopup_member_fields {
    flex-direction: row;
  }

  .resetPw .errorAlertPopup.capyPopup {
    padding: 28px 20px 30px;
  }

  .resetPw .errorAlertPopup h4 {
    font-size: 21px;
  }

  .resetPw .errorAlertPopup .popupDesc {
    font-size: 14px;
  }
}

@media (max-width: 340px) {
  .loginPopup_member_fields {
    flex-direction: column;
  }

  .loginPopup_member_fields .inputContainer {
    width: 100%;
  }
}

@media (min-width: 701px) and (max-width: 1140px) {
  .header_switch_section {
    display: flex;
    gap: 8px;
  }

  .header_switch_section a {
    height: auto;
    min-height: 35px;
    padding: 4px 6px;
    white-space: nowrap;
  }
}

@media (min-width: 961px) and (max-width: 1140px) {
  header {
    padding: 0 24px;
  }
}